<script setup lang="ts">
import {videoImagesDir} from '@/utils/config.ts'
import TextInfo from '@/components/text-info.vue'
import {DreamVideo} from '@/data/Dream'
import ImageContextMenu from '@/components/ImageContextMenu.vue'

defineProps<{
  video: DreamVideo
  contextMenu: InstanceType<typeof ImageContextMenu>  // 兄弟组件“右键菜单”，右键当前组件中的图片，调用兄弟组件的方法弹出菜单
}>()

const emit = defineEmits(['handleMouseDown', 'handleMouseUp', 'saveVideoName'])

const containerWidth = 531
const bigImageHeight = Math.ceil(containerWidth * 9 / 16)
const smallImageWidth = (containerWidth - 1) / 2
const smallImageHeight = Math.ceil(smallImageWidth * 9 / 16)
</script>

<template>
  <a-image-preview-group>
  <div class="video-cover"
       @mousedown="contextMenu.handleMouseDown($event, video.video, video.images[0])"
       @mouseup="contextMenu.handleMouseUp($event)"
  >
    <a-image :width="containerWidth"
             :height="bigImageHeight"
             :src="videoImagesDir + video.images[0]"
    />
  </div>
  <div class="video-images">
    <div v-for="img in video.images.slice(1)" :key="img"
         @mousedown="contextMenu.handleMouseDown($event, video.video, img)"
         @mouseup="contextMenu.handleMouseUp($event)"
    >
      <a-image :width="smallImageWidth"
               :height="smallImageHeight"
               :src="videoImagesDir + img"/>
    </div>
  </div>
  </a-image-preview-group>

  <text-info :video="video"/>
</template>

<style scoped lang="stylus">
.video-cover
  margin-bottom: 1px;

.video-images
  display: flex;
  justify-content: space-between;
</style>